<template>
    <view class="square_components_friends_comments" v-if="postInfo.show">
        <div class="comments_box" :class="postInfo.show ? 'comments_box_animation' : ''">
            <div class="comments_title">{{commentTotal}} 条评论
                <text class="icon-font-basic icon-b-off-1" @click="closeFriendsComments('')"></text>
            </div>
            <z-paging ref="Zpaging" class="lis_div" v-model="list" @query="getList" :refresher-enabled="true"
                :fixed="false">
                <div class="li" v-for="(li,key) in list" :key="key">
                    <pub-image class="headimg" :src="li.avatar" :mode="'aspectFill'"></pub-image>
                    <div class="text">
                        <div class="name">{{ li.nickName }}</div>
                        <div class="content">{{ li.content }}</div>
                        <div class="info">
                            <div class="time">{{ li.createTime }}</div>
                            <div class="txt" @click="toComment(li,key)">回复</div>
                            <!-- <div class="right">
                                <text class="icon-font-basic icon-b-taoxin3"></text>20
                            </div> -->
                        </div>
                        <div class="child_div" v-if="li.commentData.list.length>0">
                            <div class="li" v-for="(cli,ckey) in li.commentData.list" :key="ckey">
                                <pub-image class="headimg" :src="cli.avatar" :mode="'aspectFill'"></pub-image>
                                <div class="text">
                                    <!-- <div class="name" v-if="key==1">桂花酒</div> -->
                                    <div class="name">{{ cli.nickName }}
                                        <text class="icon-font-basic icon-b-arrow-4-1" v-if="cli.toNickName"></text> {{
                                        cli.toNickName }}
                                    </div>
                                    <div class="content">{{ cli.content }}</div>
                                    <div class="info">
                                        <div class="time">{{ cli.createTime }}</div>
                                        <div class="txt" @click="toComment(li,key,cli,ckey)">回复</div>
                                        <!-- <div class="right">
                                            <text class="icon-font-basic icon-b-taoxin3"></text>20
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="more" v-if="li.commentData.residueNum>0" @click="getChildList(key)">展开回复<text
                                class="icon-font-basic icon-b-arrow-1-4"></text></div>
                    </div>
                </div>
            </z-paging>
            <div class="input_div">
                <textarea v-model="comment" class="input" :placeholder="commentPlaceholder" maxlength="500"></textarea>
                <div class="btn" @click="addComment">回复</div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    props: {
        postInfo: {
            type: Object,
            default: () => ({
                show: false,
                id: '',
                key: -1
            })
        },
        userInfo: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        return {
            list: [],

            comment: '',//评价内容
            commentTotal: 0,
            commentPlaceholder: '请输入回复',
            commentParams: {
                commentId: "",//回复ID
                contentId: "",//帖子内容id
                firstCommentId: "",//	一级回复ID
            },
            commentKey: -1,
            commentChildKey: -1,

            fiterIds: [],
        };
    },
    watch: {
        postInfo: {
            handler() {
                // console.log(this.postInfo);
                if (this.postInfo.show) {
                    this.commentParams.contentId = this.postInfo.id;
                    setTimeout(() => {
                        this.$comFun.openLoading();
                        this.$refs.Zpaging.reload();
                    }, 400)
                } else {
                    this.list = [];
                    this.comment = '';//评价内容
                    this.commentTotal = 0;
                    this.commentKey = -1;
                    this.commentChildKey = -1;
                    this.fiterIds = [];
                    this.commentPlaceholder = '请输入回复';
                    this.commentParams = {
                        commentId: "",//回复ID
                        contentId: "",//帖子内容id
                        firstCommentId: "",//	一级回复ID
                    };
                }
            },
            immediate: true,
            deep: true
        },
    },
    onLoad() { },
    methods: {
        async getList(pageNo, pageSize) {
            let data = {
                pageNo: pageNo,
                pageSize: pageSize,
                contentId: this.postInfo.id
            };
            const res = await this.$request.get('quan/getCommentPage', data);
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.commentTotal = res.result.total;
                let list = res.result.records.filter(li => {
                    return this.fiterIds.indexOf(li.id) == -1
                })
                list.forEach(li => {
                    li.commentData = {
                        list: [],
                        pageNo: 1,
                        residueNum: li.commentNum
                    }
                })
                this.$refs.Zpaging.complete(list);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
        async getChildList(key) {
            let info = this.list[key];
            let data = {
                pageNo: info.commentData.pageNo,
                pageSize: 7,
                contentId: this.postInfo.id,
                commentId: info.id
            };
            this.$comFun.openLoading();
            const res = await this.$request.get('quan/getCommentPage', data);
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                let list = res.result.records.filter(li => {
                    return this.fiterIds.indexOf(li.id) == -1
                })
                this.list[key].commentData.list = info.commentData.list.concat(list);
                this.list[key].commentData.residueNum = res.result.total - this.list[key].commentData.list.length;
                this.list[key].commentData.pageNo++;
            }
        },
        closeFriendsComments(data) {
            if (!data) data = { postKey: -1 };
            this.$emit('closeFriendsComments', data);
        },
        toComment(info, key, cinfo, ckey) {
            // console.log(cinfo);
            this.commentKey = key;
            if (cinfo) {
                this.commentChildKey = ckey;
                this.commentPlaceholder = `回复${cinfo.nickName}`;
                this.commentParams.commentId = cinfo.id;
                this.commentParams.firstCommentId = info.id;
            } else {
                this.commentPlaceholder = `回复${info.nickName}`;
                this.commentParams.commentId = info.id;
                this.commentParams.firstCommentId = info.id;
            }
        },
        async addComment() {
            if (!this.comment) {
                this.$comFun.toast('说点什么吧');
                return;
            }
            this.$comFun.openLoading();
            const res = await this.$request.post('quan/contentComment', {
                comment: this.comment,
                ...this.commentParams
            });
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.$comFun.toast('评论成功');

                this.closeFriendsComments({
                    postKey: this.postInfo.key,
                });
                this.fiterIds.push(res.result);
                this.commentTotal++;
                if (this.commentKey == -1) {
                    this.list.unshift({
                        avatar: this.userInfo.avatar,
                        content: this.comment,
                        createTime: this.$comFun.getTimeTxt('Y-M-D H:m:s'),
                        id: res.result,
                        nickName: this.userInfo.nickName,
                        commentData: {
                            list: [],
                            pageNo: 1,
                            residueNum: 0
                        }
                    })
                } else {
                    this.list[this.commentKey].commentData.list.unshift({
                        avatar: this.userInfo.avatar,
                        content: this.comment,
                        createTime: this.$comFun.getTimeTxt('Y-M-D H:m:s'),
                        id: res.result,
                        nickName: this.userInfo.nickName,
                        toNickName: this.commentChildKey == -1 ? '' : this.list[this.commentKey].commentData.list[this.commentChildKey].nickName
                    })
                }


                this.comment = '';
                this.commentPlaceholder = '请输入回复';
                this.commentParams.commentId = '';
                this.commentParams.firstCommentId = '';
                this.commentKey = -1;
                this.commentChildKey = -1;
            } else {
                this.$comFun.toast(res.message);
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/square.scss";
</style>
